<template>
	<!-- 投资计划 -->
	<div class="container">
		<div class="d-flex" v-if="state.list.length>0" v-for="(item,index) in state.list" :key="index">
			<div class="left">
				<div class="titleTime">
					<span>{{item.createTime}}</span>
				</div>
        <div class="divider">
          <svg-icon icon-class="investment-icon-time2" class="status-icon" />
          <el-divider class="m-t10" direction="vertical" />
        </div>
			</div>
			<div class="right">
				<el-form :inline="true" label-width="180px">
					<CommonTitle class="m-b20" titleName="投资信息"></CommonTitle>
					<el-row>
						<el-col :span="12">
							<el-form-item label="形象总额(元)">
								<el-input v-model="item.imageFunds" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="支付总额(元)">
								<el-input v-model="item.payFunds" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="财政拨款(元)">
								<el-input v-model="item.investFinancialProvision" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="对外募集资金(元)">
								<el-input v-model="item.raiseFunds" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="自有资金(元)">
								<el-input v-model="item.ownFunds" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="其他投资(元)">
								<el-input v-model="item.otherFunds" disabled placeholder="" />
							</el-form-item>
						</el-col>
					</el-row>
					<CommonTitle class="m-b20" titleName="融资信息"></CommonTitle>
					<el-row>
						<el-col :span="12">
							<el-form-item label="融资总额(元)">
								<el-input v-model="item.financingAmount" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="银行贷款(元)">
								<el-input v-model="item.bankLoan" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="财政拨款(元)">
								<el-input v-model="item.financialProvision" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="企业债券(元)">
								<el-input v-model="item.corporateBond" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="非银行金融机构融资(元)">
								<el-input v-model="item.nonBankLoan" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="股权融资(元)">
								<el-input v-model="item.equityFinancing" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="其他融资(元)">
								<el-input v-model="item.otherFinancing" disabled placeholder="" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
		<el-empty v-else description="暂无数据"></el-empty>
	</div>

	<div class="button-wrap d-flex a-center j-center m-t20">
		<el-button
				class="button_cancel"
				@click="goBack"
		>返回</el-button>
	</div>
</template>

<script setup>
import { reactive } from "vue";
import {
	ElForm,
	ElRow,
	ElCol,
	ElDivider,
	ElEmpty
} from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import {investmentProjects} from "@/api/investment";
import {useRouter} from "vue-router";

const router = useRouter();
const projectId  = router.currentRoute.value.params.projectId;

const state = reactive({
	list: {},
	formData:{}
});

/**
 * 获取项目投资计划
 * @param projectId
 */
const getPlanDetail = (projectId,callback) => {
	investmentProjects.getPlanDetail(projectId).then(res=>{
		if(res.code === '200'){
			if(callback)callback();
			state.list = [res.data];
		}
	});
}

/**
 * 返回
 */
const goBack = () => {
	router.push({path:`/investmentProjectManagement/investmentProjects/investmentProjectInformation/investmentProjectsList`});
}


/**
 * 获取数据
 */
const getData = (callback) => {
	getPlanDetail(projectId,callback);
}

defineExpose({getData});
</script>

<style lang="scss" scoped>
.left {
	width: 15%;
  display: flex;
  // padding-right: 10px;
  .titleTime{
    flex: 4;
    text-align: right;
  }
  .divider{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    :deep(.el-divider){
      flex: 1;
    }
  }
}
.right {
	flex: 1;
  padding-top: 26px;
}
.el-form-item {
	width: 100%;
}
.el-divider {
	min-height: 450px;
}
.status-icon{
	width: 16px;
	height: 16px;
}
</style>
